<template>
  <div class="serve">
      <!-- 头部 -->
    <InsideHeader :bannerType="bannerType"></InsideHeader>

    <!-- 面包屑 -->
    <!-- <crumb></crumb> -->
    <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve'}" class="on">培训中心</nuxt-link>
                    <div class="clear"></div>
                </div>
                <div class="crumbR">
                    <nuxt-link :to="{name: 'serve-culCenter'}">培训中心</nuxt-link>
                    <nuxt-link :to="{name: 'serve-exhibitionHallW'}">走进智能制造</nuxt-link>
                    <nuxt-link :to="{name: 'serve-callCenterW'}">Call Center</nuxt-link>
                    <nuxt-link :to="{name: 'serve-afterServiceW'}">售后服务</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveFaqW'}">FAQ</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveQuestionsW'}">问询与建议</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveAttestationW'}">认证机构查询</nuxt-link>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    <!-- serveQuestionsW -->
    <div class="block">
        <div class="serveQuestionsW">
            <!-- Ctit -->
            <div class="Ctit">
                <p>问询与建议</p> 
            </div>
            <div class="serveQuestionsWC">
                <div class="certificateWtit">
                    <p>我要提问</p>
                </div>
                <div class="serveQuestionsWCI">
                        <div class="serveQuestionsWCIS serveQuestionsWCISl">
                            <p><em>*</em>请选择地区：</p>
                            <select v-model="form.address">
                                <option value="0" selected>请选择</option>
                                <option v-for="(item,index) in sysDicChildVos1" :key="index" :value="item.itemCode">{{item.itemName}}</option>
                            </select>
                            <div class="clear"></div>
                        </div>
                        <div class="serveQuestionsWCIS serveQuestionsWCISr">
                            <p><em>*</em>请选择类型：</p>
                            <select v-model="form.type">
                                <option value="0" selected>请选择</option>
                                <option v-for="(item,index) in sysDicChildVos2" :key="index" :value="item.itemCode">{{item.itemName}}</option>
                            </select>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIS serveQuestionsWCISl">
                                <p><em>*</em>请选择产品：</p>
                                <select v-model="form.product">
                                    <option value="0" selected>请选择</option>
                                    <option v-for="(item,index) in sysDicChildVos3" :key="index" :value="item.itemCode">{{item.itemName}}</option> 
                                </select>
                                <div class="clear"></div>
                            </div>
                            <div class="serveQuestionsWCIS serveQuestionsWCISr">
                                <p>用户名：</p>
                                <input type="text" v-model="form.username">
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIS serveQuestionsWCISl">
                                <p>真实姓名：</p>
                                <input type="text" v-model="form.realname"/>
                                <div class="clear"></div>
                            </div>
                            <div class="serveQuestionsWCIS serveQuestionsWCISr">
                                <p>性别：</p>
                                <select v-model="form.sex">
                                    <option  v-for="(item,index) in sysDicChildVos4" :key="index" :value="item.itemCode">{{item.itemName}}</option> 
                                </select>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIS serveQuestionsWCISl">
                                <p><em>*</em>电子邮箱：</p>
                                <input type="text" v-model="form.email"/>
                                <div class="clear"></div>
                            </div>
                            <div class="serveQuestionsWCIS serveQuestionsWCISr">
                                <p>电话：</p>
                                <input type="text" v-model="form.tel"/>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIE">
                                <p><em>*</em>公司名称：</p>
                                <div class="serveQuestionsWCIER">
                                    <input type="text" class="serveQuestionsWCIERinput" v-model="form.companyname"/>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIE">
                                <p><em>*</em>咨询内容：</p>
                                <div class="serveQuestionsWCIER">
                                    <textarea v-model="form.contentval"></textarea>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="serveQuestionsWCI">
                            <div class="serveQuestionsWCIE">
                                <p>上传图片：</p>
                                <div class="serveQuestionsWCIER">
                                    <div class="serveQuestionsWCIERM">
                                        <div class="serveQuestionsWCIERMF">
                                                <el-upload
                                                class="imglist"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                list-type="picture-card"
                                                :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove"
                                                :http-request="submitUpload"
                                                :before-upload="beforeAvatarUpload">
                                                  <i class="el-icon-plus"></i>
                                                </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                              <img width="100%" :src="dialogImageUrl" alt="">
                                            </el-dialog>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                    <label class="serveQuestionsWCIERC">
                                        <input type="checkbox" checked v-model="checkedValue" v-on:click="CheckItem()"/>
                                        我已阅读并同意网站会员及隐私条款 *
                                    </label>
                                    <input type="submit" value="确认提交" @click="onSubmit" class="serveQuestionsWCIERbtn"/>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
            </div>
        </div>
    </div>
    <el-dialog :visible.sync="dialogremindVisible" width="30%" :before-close="handleClose">
      <div class="dialog-content">
       <img src="../../static/images/successicon.jpg" />
       <span class="remind">提交成功</span>
       <span>当前编号为：{{inquiriesNo}}</span>
      </div>
    </el-dialog>
   
    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import qs from 'qs';
import "@/assets/css/home.css";
import "@/assets/css/serve.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";

export default {
  name: "serveQuestionsW",
  data() {
    return {
        imageUrl:'',
        dialogImageUrl: '',
        dialogremindVisible: false,
        sysDicChildVos1:[],
        sysDicChildVos2:[],
        sysDicChildVos3:[],
        sysDicChildVos4:[],
        isagree:'',
        form: {
          address: 0,
          type: 0,
          product:0,
          username: '',
          realname: '',
          sex: 1,
          email: '',
          tel: '',
          companyname:'',
          contentval:''
        },
        checkedValue:true,
        dialogVisible:false,
        inquiriesNo:'',
        bannerType:'serveQuestionsW'
    };
  },
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  methods: {
    CheckItem(){
        this.checkedValue=!this.checkedValue
    },
    //关闭弹窗
    handleClose(){
      this.dialogremindVisible=false
      location.reload()
    },
    //获取选项内容
    getChooseData() {
      let id = this.$axios;
      let params={};
      this.$api.serve.getChooseData(id, params).then(res => {
        this.sysDicChildVos1 = res.data.data.sysDicChildVos1;
        this.sysDicChildVos2 = res.data.data.sysDicChildVos2;
        this.sysDicChildVos3 = res.data.data.sysDicChildVos3;
        this.sysDicChildVos4 = res.data.data.sysDicChildVos4;
      });
    },
    // 确认提交
    onSubmit() {
      let _this=this;
      if(this.form.address==0){
        this.$message({message: '请选择地区',type: 'warning'});
        return
      }
       if(this.form.type==0){
        this.$message({message: '请选择类型',type: 'warning'});
        return
      }
      if(this.form.product==0){
        this.$message({message: '请选择产品',type: 'warning'});
        return
      }
       if(this.form.email==''){
        this.$message({message: '请填写邮箱',type: 'warning'});
        return
      }
      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
      if(!myreg.test(this.form.email)){
        this.$message({message: '请填写正确的邮箱',type: 'warning'});
        return
      }
       let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
      if(this.form.tel){
        if(!reg.test(this.form.tel) || this.form.tel.length!==11){
        this.$message({message: '请填写正确的手机号',type: 'warning'});
        return
       }
      }
       if(this.form.companyname==''){
        this.$message({message: '请填写公司名称',type: 'warning'});
        return
      }
       if(this.form.contentval==''){
        this.$message({message: '请填写内容',type: 'warning'});
        return
      }
     if(this.checkedValue==false){
        this.$message({message: '请勾选同意条款',type: 'warning'});
        return
     }
      //生成随机数
        var num = '';
        for(var i=0;i<3;i++)
        {
            num+=Math.floor(Math.random()*10);
        }
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth();//得到月份
        var date = now.getDate();//得到日期
        var day = now.getDay();//得到周几
        var hour = now.getHours();//得到小时
        var minu = now.getMinutes();//得到分钟
        var sec = now.getSeconds();//得到秒
        month = month + 1;
        if (month < 10){
            month = "0" + month
        }
        if (date < 10){
            date = "0" + date
        }
        if (hour < 10){
            hour = "0" + hour
        }
        if (minu < 10){
            minu = "0" + minu
        }
        if (sec < 10){
            sec = "0" + sec
        }
        let inquiriesNo='F'+year + month + date +hour + minu + sec+num;
        this.inquiriesNo=inquiriesNo;
        let id = this.$axios,
        params = qs.stringify({
            inquiriesNo:inquiriesNo,
            areaCode:this.form.address,
            typeCode:this.form.type,
            productCode:this.form.product,
            userName:this.form.username,
            realName:this.form.realname,
            sex:this.form.sex,
            emai:this.form.email,
            telPhone:this.form.tel,
            companyName:this.form.companyname,
            content:this.form.contentval,
            fileUrls:this.imageUrl
        });
      this.$api.serve.saveInquiresInfo(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.dialogremindVisible=true
        }else{
          this.$message({message:result.msg ,type: 'warning'});
        }
      });
    },
     //上传图片
    submitUpload(f) {
      let file = new FormData(),
        id = this.$axios;
      file.append("file", f.file);
      this.$api.serve.fileUpload(id, file).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message.success("图片上传成功");
          if(this.imageUrl){
            this.imageUrl = this.imageUrl+','+result.data;
          }else{
             this.imageUrl = result.data;
          }
        } else {
          this.$message.error(result.msg);
        }
      });
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
  created(){
     this.getChooseData(); 
  },
};
</script>

<style scoped>
.dialog-content{
  text-align: center;
}
.dialog-content img{
  margin: 0 auto;
}
.dialog-content span{
  display: block;
  text-align: center;
  margin-bottom:40px
}
.remind{
  font-size: 24px;
  margin-bottom: 20px!important
}
</style>